<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统监控</el-breadcrumb-item>
      <el-breadcrumb-item>进站IP管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片布局 -->
    <el-card>
      <!-- 植入搜索栏 -->
      <el-row :gutter="20">
        <el-col :span="5"><el-input clearable placeholder="ip" v-model="searchIP" clearableclear="getJobList"></el-input></el-col>
        <el-col :span="2">
          <el-button type="primary" @click="getIpList()">
            <el-icon><Search /></el-icon>
          </el-button>
        </el-col>
      </el-row>
      <!-- 放入table -->
      <el-table
          :data="ips"
          style="width: 100%; height: 550px; margin-top:10px;"
          border
          :header-cell-style="{ height: '37px', padding: '0' }"
          :row-style="{ height: '37px' }"
          :cell-style="{ padding: '0' }"
      >
        <!-- 数据绑定 -->
        <el-table-column  label="id" width="80" prop="id"></el-table-column>
        <el-table-column  label="进站ip" width="150" prop="beanName"></el-table-column>
        <el-table-column  label="进站时间截" width="200" prop="methodName"></el-table-column>
        <el-table-column label="记录时间" width="120" prop="methodParams"></el-table-column>
        <el-table-column label="备注信息" width="200" prop="remark"></el-table-column>
        <el-table-column label="最近访问次数" width="100" prop="count"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button :disabled="isBan" size="small" type="danger" @click="banIp(scope.$index, scope.row)">封禁此IP</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页模块 -->
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next"
          :total="totalCount"
          @size-change="onSizeChange"
          @current-change="onPageChange"
      />
    </el-card>
  </div>
</template>

<script>

import {ElMessage} from "element-plus";
import {getIpList} from "@/api/system";

export default {
  name: "manage",
  data() {
    return {
      searchIP:'',


      pageNo: 1,
      pageSize: 10,
      totalCount: 0,

      isBan:false,


    };
  },
  methods: {
    onSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      // this.getJobList();
    },
    onPageChange(page) {
      this.pageNo = page;
      // this.getJobList();
    },
    banIp(index,row){

    },
    getIpList(){

    }

  },
  mounted() {
    const param = { page: '', limit: '' };
    getIpList(param).then(resp => {
      console.log(resp)
      this.jobs = resp.rows;
    });
  }
}
</script>

<style scoped>
div.el-breadcrumb {
  height: 45px;
}

.el-dialog__body {
  padding: 0px 15px;
}

.el-form-item {
  /* height: 68px; */
}
</style>
